<template>
	<div class="account-approval">
		<div class="crumbs-wrapper">
			<Crumbs title="系统管理" sub-title="账户审批" />
		</div>
		<div class="main">
			<el-menu default-active="WAIT" mode="horizontal" @select="navTab">
			  <el-menu-item index="WAIT">未审批</el-menu-item>
			  <el-menu-item index="AUDITED">已审批</el-menu-item>
			</el-menu>
			<br>
			<el-row>
				<el-form :inline="true" size="small">
					<el-form-item label="账号名称">
						<el-input v-model="searchFormData.userName" placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item label="集团名称">
						<el-input v-model="searchFormData.groupName" placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item label="公司名称">
						<el-input v-model="searchFormData.compName" placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="default" @click="reset">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
					<el-form-item v-if="searchFormData.auditStatus=='WAIT'">
						<el-button type="primary" :disabled="!selectingList.length" @click="approval(1)">通过</el-button>
						<el-button type="primary" :disabled="!selectingList.length" @click="approval(2)">驳回</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<el-table size="small" v-loading="tableLoading" :data="tableData" 
					:cell-style= "{'text-align':'center'}" :header-cell-style="{'text-align':'center'}"
					@selection-change="rowSelect">
					<el-table-column type="selection" />
					<el-table-column label="账号名称" prop="userName" />
					<el-table-column label="审核状态">
						<template slot-scope="scope">
							<span v-if="scope.row.auditStatus == 0">未审批</span>
							<span v-if="scope.row.auditStatus == 1">审批通过</span>
							<span v-if="scope.row.auditStatus == 2">驳回</span>
						</template>
					</el-table-column>
					<el-table-column label="集团名称" prop="groupName" />
					<el-table-column label="公司名称" prop="compName" />
					<el-table-column label="企业统一社会信用编码" prop="enterprise" />
					<el-table-column label="姓名" prop="realName" />
					<el-table-column label="邮箱" prop="email" />
					<el-table-column label="手机" prop="phonenumber" />
					<el-table-column label="注册日期" prop="createTime" />
				</el-table>
			</el-row>
			<!-- 分页 -->
			<p>
				<el-pagination background layout="total, sizes, prev, pager, next, jumper"
					:current-page="searchFormData.pageNum"
					:page-sizes="[10, 20, 30, 50]"
					:page-size="10"
					:total="searchFormData.total" 
					@size-change="pageSizeChange"
					@current-change="currentPageChange"
				  />
			</p>
				
		</div>
	</div>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				searchFormData: {
					auditStatus: 'WAIT' ,// 待审批WAIT ，已审批AUDITED ，未审批0, 审批通过1, 驳回2
					compName: '', //公司名称
					groupName: '', //集团名称
					userName: '', //账号名称
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
				tableData: [],
				tableLoading: false,
				selectingList: [], //选中的列表
				
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			currentPageChange(pageNum) { //当前页发生变化
				this.searchFormData.pageNum = pageNum
				this.loadData()
			},
			loadData() { //加载表格
				this.tableLoading = true;
				this.$http({
					url: '/api/system/audit/list',
					method: 'POST',
					data: this.searchFormData
				}).then( res => {
					this.tableLoading = false;
					this.tableData = res.data.rows;
					this.searchFormData.total = res.data.total;
				})
			},
			navTab(val) { //tab切换
				this.searchFormData.auditStatus = val;
				this.loadData()
			},
			approval(auditStatus) { //审批操作
				this.$confirm(`是否${auditStatus==1?'审批通过':'驳回'}该数据？`, '提示')
				.then(()=>{
					this.$http({
						url: '/api/system/audit/update',
						method: 'POST',
						data: {
							'auditStatus': auditStatus,
							'userIds': this.selectingList.map(item=>item.userId)
						}
					}).then( res => {
						this.loadData()
					})
				})
			},
			pageSizeChange(pageSize) {
				this.searchFormData.pageNum = 1;
				this.searchFormData.pageSize = pageSize;
				this.loadData()
			},
			reset() {
				this.searchFormData.compName = ''; //公司名称
				this.searchFormData.groupName = ''; //集团名称
				this.searchFormData.userName = ''; //账号名称
				this.searchFormData.pageNum = 1
				this.loadData()
			},
			rowSelect(list) {
				this.selectingList = list;
			},
			search() {
				this.loadData()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.account-approval {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;

		.crumbs-wrapper {}

		.main {
			height: 92%;
			background-color: white;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 10px 20px;
		}
	}
</style>
